<template>
  <div class="content-info">
    <LabelTitle text="经济统计" :showImg="false"></LabelTitle>
    <div class="sjtj-box mt10">
      <div class="right-charts">
        <div class="item-line">
          <div class="info-item w4">
            <div class="imgbg">
              <img class="img" src="@/assets/images/jj.png" />
            </div>

            <div class="infotext">
              <p class="text">固定资产投资/亿</p>
              <p class="num">{{ getKeyValue("固定资产投资") }}</p>
            </div>
          </div>
          <div class="info-item w6">
            <div class="imgbg">
              <img class="img" src="@/assets/images/jj.png" />
            </div>

            <div class="infotext">
              <p class="text">限额以上社会消费品零售额/亿</p>
              <p class="num">{{ getKeyValue("限额以上社会消费品零售额") }}</p>
            </div>
          </div>
        </div>
        <div class="item-line">
          <div class="info-item w4">
            <div class="imgbg">
              <img class="img smallImg" src="@/assets/images/upg.png" />
              <p class="tips">{{ getKeyValue("区级税收增加值") }}</p>
            </div>

            <div class="infotext">
              <p class="text">区级税收/亿</p>
              <p class="num">{{ getKeyValue("区级税收") }}</p>
            </div>
          </div>
          <div class="info-item w6">
            <div class="imgbg">
              <img class="img smallImg" src="@/assets/images/upg.png" />
              <p class="tips">{{ getKeyValue("限额以上商品销售额增加值") }}</p>
            </div>

            <div class="infotext">
              <p class="text">限额以上商品销售额/亿</p>
              <p class="num">{{ getKeyValue("限额以上商品销售额") }}</p>
            </div>
          </div>
        </div>
        <div class="item-line">
          <div class="info-item w4">
            <div class="imgbg">
              <img class="img smallImg" src="@/assets/images/upg.png" />
              <p class="tips">{{ getKeyValue("产业项目到位额增加值") }}</p>
            </div>

            <div class="infotext">
              <p class="text">产业项目到位额/亿</p>
              <p class="num">{{ getKeyValue("产业项目到位额") }}</p>
            </div>
          </div>
          <div class="info-item w6">
            <div class="imgbg">
              <img class="img smallImg" src="@/assets/images/upg.png" />
              <p class="tips">
                {{ getKeyValue("营利性服务业营业收入增加值") }}
              </p>
            </div>

            <div class="infotext">
              <p class="text">营利性服务业营业收入/亿</p>
              <p class="num">{{ getKeyValue("营利性服务业营业收入") }}</p>
            </div>
          </div>
        </div>
        <div class="item-line">
          <div class="info-item" style="width: 100%">
            <div class="imgbg">
              <img class="img smallImg" src="@/assets/images/upg.png" />
              <p class="tips">{{ getKeyValue("交通运输业营业收入增加值") }}</p>
            </div>

            <div class="infotext">
              <p class="text">交通运输业营业收入/亿</p>
              <p class="num">{{ getKeyValue("交通运输业营业收入") }}</p>
            </div>
          </div>
        </div>
      </div>
      <div class="sjbh-echarts">
        <EchartsComponent
          :options="pieData"
          :lengthData="lenglist.length"
          width="200px"
          height="200px"
        ></EchartsComponent>
        <div class="center-title">
          <p class="title">企业类型</p>
        </div>
        <div class="bottom-lengend">
          <div
            class="type-box"
            v-for="(item, index) in lenglist"
            :class="{ active: index % 2 == 100 }"
            :key="index"
          >
            <span class="color" :style="{ background: color[index] }"></span>
            <span class="text exlipse" :title="item.type">{{ item.type }}</span>
            <span class="text">{{ item.num }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import LabelTitle from "@/components/labeltitle.vue";
import EchartsComponent from "@/components/echarts.vue";
import { onMounted } from "vue";
import { getCompanyTypeData, getStaticData } from "@/api/jdld.js";
import pie from "../pie.vue";

const props = defineProps({
  allData: Object,
});

let currentTime = ref(7);
const selectTime = (time) => {
  currentTime.value = time;
  getData();
};

let pieData = ref([]);
let color = ref([
  "#05BDF7",
  "#FFCE40",
  "#6CD06A",
  "#CDDEE1",
  "#AA88FF",
  "#F97E7E",
  "#2E9BFC",
  "#F49B28",
  "#F29EFE",
  "#90DBDB",
  "#039700",
  "#9FC0C6",
  "#6C31FF",
  "#B06060",
  "#B420C9",
  "#FF1010",
  "#D1BEBF",
  "#00769B",
  "#29B5B6",
  "#CE9900",
  "#D0BA93",
  "#B6ABD1",
  "#EAB8B8",
  "#A7D6FF",
  "#D9C659",
  "#969098",
]);
let lenglist = ref([]);
let totalNum = ref(0);
const getData = async () => {
  try {
    let res = await getCompanyTypeData();
    let data = [];
    let allNum = 0;
    res.data.listEnterpriseCnt.forEach((item) => {
      allNum += item.cnt;
    });
    res.data.listEnterpriseCnt.forEach((item) => {
      data.push({
        type: item.enterpriseType == 1 ? "企事业单位" : "个体商户",
        num: item.cnt,
        persent: ((item.cnt / allNum) * 100).toFixed(2) + "%",
      });
    });

    // let data = [
    //   {
    //     type: "占道经营",
    //     num: 122,
    //     persent: "24%",
    //   },
    //   {
    //     type: "占道经营",
    //     num: 111,
    //     persent: "24%",
    //   },
    //   {
    //     type: "占道经营",
    //     num: 222,
    //     persent: "24%",
    //   },
    //   {
    //     type: "占道经营",
    //     num: 121,
    //     persent: "24%",
    //   },
    //   {
    //     type: "占道经营",
    //     num: 221,
    //     persent: "24%",
    //   },
    //   {
    //     type: "占道经营",
    //     num: 333,
    //     persent: "24%",
    //   },
    // ];
    lenglist.value = data;
    let arr = [];
    data.forEach((item, index) => {
      arr.push({
        value: item.num,
        name: item.type,
        itemStyle: {
          color: color.value[index],
        },
      });
    });
    console.log("data", data);

    pieData.value = {
      backgroundColor: "transparent",
      animation: true,
      title: {
        show: false,
        text: "社区服务",
        subtext: "32个",
        x: "13%",
        y: "20%",
        textStyle: {
          color: "#B0D9FF",
          fontSize: 40,
          align: "top",
          lineHeight: 50,
        },
        subtextStyle: {
          color: "#fff",
          fontSize: 46,
          fontWeight: "600",
          align: "center",
          lineHeight: 50,
        },
      },

      series: [
        {
          type: "pie",
          center: ["46%", "50%"],
          radius: ["55%", "75%"],
          minAngle: 5, // 设置最小角度
          color: color,
          startAngle: 135,
          labelLine: {
            show: false,
            normal: {
              show: false,
              length: 25,
            },
          },
          itemStyle: {
            normal: {
              borderWidth: 5,
              borderColor: "#fff",
            },
          },
          label: {
            show: false,
            normal: {
              show: false,
              formatter: "{b|{b}:}  {per|{d}%} ",
              backgroundColor: "rgba(255, 147, 38, 0)",
              borderColor: "transparent",
              borderRadius: 4,
              rich: {
                a: {
                  color: "#999",
                  lineHeight: 22,
                  align: "center",
                },
                hr: {
                  borderColor: "#aaa",
                  width: "100%",
                  borderWidth: 1,
                  height: 0,
                },
                b: {
                  color: "#b3e5ff",
                  fontSize: 16,
                  lineHeight: 33,
                },
                c: {
                  fontSize: 14,
                  color: "#eee",
                },
                per: {
                  color: "#FDF44E",
                  fontSize: 14,
                  padding: [5, 8],
                  borderRadius: 2,
                },
              },
              textStyle: {
                color: "#fff",
                fontSize: 16,
              },
            },
          },
          emphasis: {
            label: {
              show: false,
              formatter: "{b|{b}:}  {per|{d}%}  ",
              backgroundColor: "rgba(255, 147, 38, 0)",
              borderColor: "transparent",
              borderRadius: 4,
              rich: {
                a: {
                  color: "#999",
                  lineHeight: 22,
                  align: "center",
                },
                hr: {
                  borderColor: "#aaa",
                  width: "100%",
                  borderWidth: 1,
                  height: 0,
                },
                b: {
                  color: "#fff",
                  fontSize: 18,
                  lineHeight: 33,
                },
                c: {
                  fontSize: 14,
                  color: "#eee",
                },
                per: {
                  color: "#FDF44E",
                  fontSize: 25,
                  padding: [5, 6],
                  borderRadius: 2,
                },
              },
            },
          },
          data: arr,
        },
      ],
    };
  } catch (e) {
    console.error(e.message);
  }
};

let allDataList = ref([]);
const getstaticDataFun = async () => {
  try {
    let { data } = await getStaticData({
      dataItemGroup: "经济统计",
    });
    allDataList.value = data.dataList;
  } catch (e) {
    console.error("首页报错", e);
  }
};

const getKeyValue = (key) => {
  let index = allDataList.value.findIndex((item) => item.dataItemLable === key);
  if (index > -1) {
    return allDataList.value[index].dataItemValue;
  }
};

onMounted(() => {
  getstaticDataFun();
  getData();
});
</script>

<style lang="scss" scoped>
.content-info {
  width: 100%;
  // height: 250px;
  margin-right: 20px;
  margin-top: 22px;
  position: relative;
  .sjtj-box {
    margin-top: 14px;
    height: 320px;
    background: #ffffff;
    box-shadow: 0px 0px 20px 0px rgba(70, 102, 149, 0.06);
    border-radius: 12px;
    overflow: hidden; // 防止内部滚动条导致容器溢出
    // padding: 0px 20px 28px 0; // 右侧内边距减小（滚动条占用空间）
    display: flex;
    align-items: top;
    .sjbh-echarts {
      width: 26%;
      height: 100%;
      position: relative;
      margin-top: 30px;
      margin-right: 30px;
      .center-title {
        width: 110px;
        height: 110px;
        position: absolute;
        text-align: center;
        border: 1px solid #eeeeee;
        left: 92px;
        top: 100px;
        transform: translate(-50%, -50%);
        padding-top: 40px;
        border-radius: 50%;
        .title {
          font-size: 14px;
          color: #666666;
          padding-top: 4px;
        }
        .num {
          font-family: YouSheBiaoTiHei;
          color: #fff;
          font-size: 23px;
          font-weight: 600;
        }
      }
    }

    .bottom-lengend {
      width: 100%;
      //   height: 100%; // 限制最大高度
      overflow-y: auto; // 垂直滚动条
      padding-right: 8px; // 避免滚动条遮挡内容
      margin-left: 30px;
      /* 自定义滚动条样式（可选） */
      &::-webkit-scrollbar {
        width: 4px; // 滚动条宽度
      }
      &::-webkit-scrollbar-thumb {
        background: #ccc; // 滑块颜色
        border-radius: 2px;
      }
      &::-webkit-scrollbar-track {
        background: transparent; // 轨道颜色
      }
      .title {
        width: 100%;
        height: 26px;
        line-height: 26px;
        display: flex;
        align-items: center;
        background: #2263bf;
        span {
          display: inline-block;
          width: 33%;
          color: #ffffff;
          text-align: center;
        }
      }
      .type-box {
        width: 100%;
        // height: 35px;
        // line-height: 35px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        transition: background 0.3s; // 添加过渡动画
        &:hover {
          background: rgba(34, 99, 191, 0.1) !important; // 悬停浅蓝色背景
          .text {
            color: #2263bf !important; // 悬停文字变主题蓝
          }
        }
        &.active {
          background: rgba(34, 99, 191, 0.06);
        }

        .color {
          width: 10px;
          height: 10px;
          border-radius: 1px;
          margin-right: 10px;
          margin-left: 9px;
        }
        .text {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 12px;
          color: #666666;
          line-height: 20px;
          width: 50%;
          &:nth-child(3) {
            padding-left: 12px;
          }
          &:nth-child(4) {
            padding-left: 22px;
          }
        }
      }
    }
    .right-charts {
      flex: 1;
      height: 100%;
      padding-top: 30px;
      margin-left: 20px;
      .content-box {
        height: 250px;
        // padding: 20px;
      }
    }
  }
}

.item-line {
  width: 100%;
  height: 60px;
  background: rgba(142, 191, 255, 0.15);
  border-radius: 8px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 12px;
  .info-item {
    // width: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    &.w4 {
      width: 40%;
    }
    &.w6 {
      width: 60%;
    }
    .imgbg {
      width: 45px;
      height: 45px;
      background: #ffffff;
      box-shadow: 0px 0px 29px 0px rgba(70, 102, 149, 0.06);
      border-radius: 12px;
      margin-right: 9px;
      .img {
        width: 20px;
        height: 20px;
        margin: 12px;
      }
      .smallImg {
        width: 12px;
        height: 12px;
        margin: 0 16px;
      }
      .tips {
        text-align: center;
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 12px;
        color: #31bf22;
        white-space: nowrap;
      }
    }
    .infotext {
      .text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 12px;
        color: #666666;
      }
      .num {
        font-family: YouSheBiaoTiHei;
        font-size: 18px;
        color: #2263bf;
      }
    }
  }
}
</style>
